<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<c:set var="ctx" value="${pageContext.request.contextPath}" />

<ul class="breadcrumb panel">
    <li><a href="#"><i class=" fa fa-home"></i> 首页</a></li>
    <li>审批详情</li>
</ul>
<input type="hidden" name="task_id" id="task_id" value="${task.ID_}"/>
<input type="hidden" name="proc_inst_id" id="proc_inst_id" value="${task.PROC_INST_ID_}"/>
<input type="hidden" name="proc_def_id_" id="proc_def_id_" value="${task.PROC_DEF_ID_}"/>
<div id="maxHiddenBox">
    <input type="hidden" id="ddd_orderId" v-model="ddd_orderId">
    <input type="hidden" id="ddd_orderType" v-model="ddd_orderType">
</div>
<script>
    var maxHiddenBox = new Vue({
        el:"#maxHiddenBox",
        data:{
            ddd_orderId:'123',
            ddd_orderType:'234234'
        }
    })
    function assignHandle(taskId){
        zConfirm('确认签收？');
        confirmOk.click(function(){
            $.ajax({
                url: "${ctx}/taskUnassign/taskAssign",
                type: 'post',
                data: {
                    id: taskId
                },
                success: function (data) {
                    zConfirmHide();
                    if (data.success) {
                        loadFun('/taskWait/toHandle?id='+taskId);
                    } else {
                        zAlert(data.msg);
                    }
                }
            })
        });
    }
</script>
<c:if test="${!empty assign}">
    <div style="width: 100%;height: 60px;">
        <button type="button" class="btn  btn-info pull-left" onclick="assignHandle('${task.ID_}')"><i class="fa fa-share-square-o"></i> 签收并处理</button>
    </div>
</c:if>
<section class="panel">
    <header class="panel-heading custom-tab dark-tab">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#formBox" data-toggle="tab"><i class="fa fa-file-text-o"></i> 审批信息</a>
            </li>
          <%-- <li class="">
                <a href="#infoBox" data-toggle="tab"><i class="fa fa-list-alt"></i> 任务信息</a>
            </li>--%>
            <li class="">
                <a href="#recordBox" data-toggle="tab"><i class="fa fa-print"></i> 审批记录</a>
            </li>
        </ul>
    </header>
    <div class="panel-body">
        <div class="tab-content">

            <div class="tab-pane active" id="formBox">
                <form action="" class="form-horizontal">
                    <input type="hidden" id="judge_apply_id" name="judge_apply_id" value="${judgeApply.judge_apply_id}">
                    <div class="form-group-separator">
                        <div class="item">申请单信息</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">案件名称：</label>
                                <div class="col-sm-8">
                                    <div class="recordInfo">${judgeApply.case_name}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">案件编号：</label>
                                <div class="col-sm-8">
                                    <div class="recordInfo">${judgeApply.case_code}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">申请单位：</label>
                                <div class="col-sm-8">
                                    <div class="recordInfo">${judgeApply.apply_unit}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">申请人：</label>
                                <div class="col-sm-8">
                                    <div class="recordInfo">${judgeApply.apply_person}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">申请日期：</label>
                                <div class="col-sm-8">
                                    <div class="recordInfo">${fn:substring(judgeApply.apply_date, 0, 10)}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">联系电话：</label>
                                <div class="col-sm-8">
                                    <div class="recordInfo">${judgeApply.phone}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">案件性质：</label>
                                <div class="col-sm-8">
                                    <div class="recordInfo">${judgeApply.value}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">简要案情：</label>
                                <div class="col-sm-8">
                                    <div class="recordInfo">${judgeApply.case_content}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">申请目的和要求：</label>
                                <div class="col-sm-8">
                                    <div class="recordInfo">${judgeApply.apply_target}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">备注：${showForm}</label>
                                <div class="col-sm-8">
                                    <div class="recordInfo">${judgeApply.remark}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <c:if test="${showForm != 0 }">
                    <form action="" class="form-horizontal" id="nowNode">
                        <div class="form-group-separator">
                            <div class="item">审批信息</div>
                        </div>
                        <div class="form-group" style="display: none">
                            <label class="col-sm-2 control-label">当前环节</label>
                            <div class="col-sm-8">
                                <div class="recordInfo"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">处理意见</label>
                            <div class="col-sm-8">
                                <textarea class="form-control" v-model="opinion" name="opinion" cols="30" rows="10" placeholder="..."></textarea>
                            </div>
                        </div>
                   <input type="hidden" id="nextNodeKey" name="nextNodeKey" value="${nextNodeKey}">
                    <c:if test="${nextNodeKey != 'End'}">
                        <div class="form-group" >
                            <label class="col-sm-2 control-label">是否上报</label>
                            <div class="col-sm-8 icheck" style="padding-top: 6px;">

                                <label style="margin-right: 15px;">
                                    <input type="radio" name="adopt" id="adoptY"   value="1" v-model="isAdopt"> 上报
                                </label>

                                <label>
                                    <input type="radio" name="adopt" id="adoptN"  value="0" v-model="isAdopt"> 结束
                                </label>
                            </div>
                        </div>
                   </c:if>
                        <div class="form-group" style="display: none">
                            <label class="col-sm-2 control-label">下一环节</label>
                            <div class="col-sm-8">
                                <div class="recordInfo">
                                    <span v-show="isAdopt==1"></span>
                                    <span v-show="isAdopt==0"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-10">
                                <button type="button" class="btn btn-primary pull-right" id="subBtn" @click="subFun"><i
                                        class="fa fa-share"></i> 提交
                                </button>
                                <button type="button" class="btn btn-default pull-right marR" onclick="backFun('/taskWait/toTaskWaitIndex')"><i
                                        class="glyphicon glyphicon-chevron-left"></i> 返回
                                </button>
                            </div>
                        </div>
                    </form>
                </c:if>
            </div>
         <%--<div class="tab-pane" id="infoBox">

            </div>--%>
            <div class="tab-pane" id="recordBox">
                <form action="" class="form-horizontal">
                    <div class="timeAxis head">
                        <div class="row">
                            <div class="col-xs-2">
                                <div class="proceLink">
                                    标题
                                </div>
                            </div>
                            <div class="col-xs-10">
                                <div class="proceLinkInfo">
                                    <div class="pont"><i class="fa fa-external-link-square"></i></div>
                                    <div class="row">
                                        <div class="col-xs-9">
                                            <ul>
                                                <li>${task.TITLE}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="timeAxis">
                        <div class="row">
                            <div class="col-xs-2">
                                <div class="proceLink">
                                    开始
                                </div>
                            </div>
                            <div class="col-xs-10">
                                <div class="proceLinkInfo">
                                    <div class="pont"><i class="fa fa-dot-circle-o"></i></div>
                                    <div class="row">
                                        <div class="col-xs-9">
                                            <ul>
                                                <li>申请人：${task.CREATE_USER_}</li>
                                                <li>发起时间：${fn:substring(task.START_TIME_,0, 19)}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <c:forEach items="${taskHiList}" var="t">
                        <div class="timeAxis ">
                            <div class="row">
                                <div class="col-xs-2">
                                    <div class="proceLink">
                                        ${t.NAME_}
                                    </div>
                                </div>
                                <div class="col-xs-10">
                                    <div class="proceLinkInfo">
                                        <div class="pont"><i class="fa fa-dot-circle-o"></i></div>
                                        <div class="row">
                                            <div class="col-xs-9">
                                                <ul>
                                                    <li>处理人：${t.ASSIGNEE_}</li>
                                                    <li>处理时间：${fn:substring(t.END_TIME_,0, 19)}</li>
                                                    <li>处理时长：<span class="handleTime">${t.PROC_TIME_}</span></li>
                                                    <li>处理意见：${t.MESSAGE_}</li>
                                                    <c:if test="${!empty t.attachId}">
                                                        <li>附件：<a href="${ctx}/attach/download?id=${t.attachId}" title="${t.attachName}" download="${t.attachName}">${t.attachName}</a></li>
                                                    </c:if>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                    <c:if test="${taskEnd eq true}">
                        <div class="timeAxis">
                            <div class="row">
                                <div class="col-xs-2">
                                    <div class="proceLink">
                                        结束
                                    </div>
                                </div>
                                <div class="col-xs-10">
                                    <div class="proceLinkInfo">
                                        <div class="pont"><i class="fa fa-dot-circle-o"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </c:if>
                </form>

                <button type="button" class="btn btn-default pull-right" onclick='javascript:history.go(-1)'><i
                        class="glyphicon glyphicon-chevron-left"></i> 返回
                </button>
            </div>
        </div>
    </div>
</section>
<script>

    var vmTask = new Vue({
        el:"#nowNode",
        data:{
            nowNode:'',
            nextNodeY:'',
            nextNodeN:'',
            isAdopt:1,
            opinion:'',
            assign_user1:'',
            assign_group1:'',
            assign_user2:'',
            assign_group2:''
        },
        methods:{
            subFun:function(){
                if(this.opinion==false){
                     zAlert('请输入处理意见！');
                     return false;
                 }else{
               /* if(this.isAdopt==1){
                    var assign_user=this.assign_user1;
                    var assign_group=this.assign_group1;
                }else {
                    var assign_user=this.assign_user2;
                    var assign_group=this.assign_group2;
                }*/

                $.ajax({
                    url: "${ctx}/taskForm/approveForm",
                    type: 'post',
                    data: {
                        task_id:$('#task_id').val(),
                        proc_inst_id:$("#proc_inst_id").val(),
                        comment:this.opinion,
                        //approve_group:assign_group,
                        //approve_user:assign_user,
                        judge_apply_id:$("#judge_apply_id").val(),
                        nextNodeKey:$("#nextNodeKey").val(),
                        approveResult:this.isAdopt
                    },
                    success: function (data) {
                        if (data.success) {
                            zAlert(data.msg);
                            setTimeout(function () {
                                loadFun("/taskWait/toTaskWaitIndex");
                            }, 1000);
                        } else {
                            zAlert(data.msg);
                        }
                    }
                })
            }
        }
        }
    });

    $(function () {
        function formatSeconds(second_time ) {
            var time = parseInt(second_time) + "秒";
            if( parseInt(second_time )> 60){

                var second = parseInt(second_time) % 60;
                var min = parseInt(second_time / 60);
                time = min + "分" + second + "秒";

                if( min > 60 ){
                    min = parseInt(second_time / 60) % 60;
                    var hour = parseInt( parseInt(second_time / 60) /60 );
                    time = hour + "时" + min + "分" + second + "秒";

                    if( hour > 24 ){
                        hour = parseInt( parseInt(second_time / 60) /60 ) % 24;
                        var day = parseInt( parseInt( parseInt(second_time / 60) /60 ) / 24 );
                        time = day + "天" + hour + "时" + min + "分" + second + "秒";
                    }
                }

            }
            return time;
        }

        var handleTimeSize = $(".handleTime").length;

        var hanArr = [];
        for(var i=0;i<handleTimeSize;i++){
            hanArr[i] = formatSeconds($(".handleTime").eq(i).text());
        };
        for(var i=0;i<hanArr.length;i++){
            $(".handleTime").eq(i).text(hanArr[i]);
        };

    })

</script>
